<script setup>
import { ref, onMounted, onPullDownRefresh, onReachBottom } from 'vue'
import { useProjectStore } from '@/stores/project'
import NavBar from '@/components/common/NavBar.vue'
import SearchBar from '@/components/common/SearchBar.vue'
import { onLoad } from '@dcloudio/uni-app';
const projectStore = useProjectStore()
const loading = ref(false)
const refreshing = ref(false)
const keyword = ref('')
const showFilter = ref(false)
const categoryId = ref('');
const categoryName = ref('');

onLoad((options) => {
   categoryId.value = options.id; // 获取 id 参数
   categoryName.value = decodeURIComponent(options.name); // 获取 name 参数并解码
  console.log("参数：",categoryId.value,categoryName.value)
});
// 筛选条件
const filters = ref({
  category: '',
  budget: '',
  date: '',
  location: ''
})

// 初始化数据
const initData = async () => {
  loading.value = true
  await projectStore.fetchCategories()
  await projectStore.fetchProjects()
  loading.value = false
}

// 刷新
const onRefresh = async () => {
  refreshing.value = true
  projectStore.resetPage()
  await projectStore.fetchProjects()
  uni.stopPullDownRefresh()
  refreshing.value = false
}

// 加载更多
const loadMore = async () => {
  if (loading.value) return
  loading.value = true
  projectStore.setPage(projectStore.pagination.page + 1)
  await projectStore.fetchProjects()
  loading.value = false
}

// 搜索
const onSearch = async (value) => {
  projectStore.resetPage()
  await projectStore.fetchProjects({ keyword: value })
}

// 应用筛选
const applyFilters = async () => {
  projectStore.setFilters(filters.value)
  projectStore.resetPage()
  await projectStore.fetchProjects()
  showFilter.value = false
}

// 重置筛选
const resetFilters = () => {
  filters.value = {
    category: '',
    budget: '',
    date: '',
    location: ''
  }
  projectStore.resetFilters()
  projectStore.resetPage()
  projectStore.fetchProjects()
  showFilter.value = false
}

// 跳转到项目详情
const goToDetail = (id) => {
  uni.navigateTo({
    url: `/pages/project/project-detail?id=${id}`
  })
}

onMounted(() => {
  initData()
})

</script>

<template>
  <view class="project-list">
    <NavBar title="项目列表" :show-back="false" />
    
    <view class="search-filter">
      <SearchBar 
        v-model:value="keyword"
        placeholder="搜索项目"
        @search="onSearch"
      />
      <view class="filter-tags">
        <scroll-view scroll-x class="scroll-view">
          <view class="tags">
            <view 
              v-for="category in projectStore.categories"
              :key="category.id"
              class="tag"
              :class="{ active: filters.category === category.id }"
              @tap="filters.category = category.id"
            >
              {{ category.name }}
            </view>
          </view>
        </scroll-view>
        <view class="filter-btn" @tap="showFilter = true">
          <image src="/static/icons/filter.png" mode="aspectFit" />
        </view>
      </view>
    </view>
    
    <scroll-view 
      scroll-y 
      class="project-scroll"
      @scrolltolower="loadMore"
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
    >
      <view class="project-list-content">
        <view 
          v-for="project in projectStore.projectList"
          :key="project.id"
          class="project-card"
          @tap="goToDetail(project.id)"
        >
          <view class="header">
            <text class="title">{{ project.title }}</text>
            <text class="budget">¥{{ project.budget }}</text>
          </view>
          <view class="desc">{{ project.description }}</view>
          <view class="company">
            <image :src="project.companyLogo" mode="aspectFill" class="logo" />
            <text class="name">{{ project.companyName }}</text>
            <view class="rating">
              <image src="/static/icons/star.png" mode="aspectFit" />
              <text>{{ project.rating }}</text>
            </view>
          </view>
          <view class="footer">
            <view class="location">
              <image src="/static/icons/map-pin.png" mode="aspectFit" />
              <text>{{ project.location }}</text>
            </view>
            <view class="deadline">
              <image src="/static/icons/calendar.png" mode="aspectFit" />
              <text>截止: {{ project.deadline }}</text>
            </view>
            <view class="bid-btn">投标</view>
          </view>
        </view>
      </view>
      
      <view v-if="loading" class="loading">
        <image src="/static/icons/loading.png" mode="aspectFit" class="loading-icon" />
        <text>加载中...</text>
      </view>
    </scroll-view>
    
    <!-- 筛选弹窗 -->
    <uni-popup ref="filterPopup" type="right" :mask-click="true" v-model:show="showFilter">
      <view class="filter-popup">
        <view class="filter-header">
          <text class="title">筛选条件</text>
          <text class="reset" @tap="resetFilters">重置</text>
        </view>
        
        <view class="filter-content">
          <view class="filter-section">
            <text class="section-title">预算范围</text>
            <view class="budget-range">
              <input 
                type="number" 
                v-model="filters.budgetMin"
                placeholder="最低预算"
              />
              <text>-</text>
              <input 
                type="number"
                v-model="filters.budgetMax"
                placeholder="最高预算"
              />
            </view>
          </view>
          
          <view class="filter-section">
            <text class="section-title">发布时间</text>
            <picker 
              mode="date" 
              :value="filters.date"
              @change="e => filters.date = e.detail.value"
            >
              <view class="picker">
                {{ filters.date || '请选择日期' }}
              </view>
            </picker>
          </view>
          
          <view class="filter-section">
            <text class="section-title">项目地点</text>
            <picker 
              mode="region" 
              :value="filters.location"
              @change="e => filters.location = e.detail.value"
            >
              <view class="picker">
                {{ filters.location ? filters.location.join(' ') : '请选择地区' }}
              </view>
            </picker>
          </view>
        </view>
        
        <view class="filter-footer">
          <button class="confirm-btn" @tap="applyFilters">确认</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<style lang="scss" scoped>
.project-list {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f5f7fa;
  
  .search-filter {
    background: #fff;
    padding-bottom: 16rpx;
    
    .filter-tags {
      display: flex;
      align-items: center;
      padding: 0 32rpx;
      
      .scroll-view {
        flex: 1;
        white-space: nowrap;
        
        .tags {
          display: inline-flex;
          padding: 8rpx 0;
          
          .tag {
            padding: 12rpx 24rpx;
            margin-right: 16rpx;
            background: #f3f4f6;
            border-radius: 32rpx;
            font-size: 24rpx;
            color: #666;
            
            &.active {
              background: #1d4ed8;
              color: #fff;
            }
          }
        }
      }
      
      .filter-btn {
        width: 64rpx;
        height: 64rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 16rpx;
        
        image {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
  }
  
  .project-scroll {
    flex: 1;
    
    .project-list-content {
      padding: 32rpx;
      
      .project-card {
        background: #fff;
        border-radius: 16rpx;
        padding: 24rpx;
        margin-bottom: 24rpx;
        
        .header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 16rpx;
          
          .title {
            font-size: 32rpx;
            font-weight: 500;
            color: #333;
          }
          
          .budget {
            font-size: 28rpx;
            color: #1d4ed8;
            font-weight: 500;
          }
        }
        
        .desc {
          font-size: 28rpx;
          color: #666;
          margin-bottom: 16rpx;
          line-height: 1.5;
        }
        
        .company {
          display: flex;
          align-items: center;
          margin-bottom: 16rpx;
          
          .logo {
            width: 48rpx;
            height: 48rpx;
            border-radius: 8rpx;
            margin-right: 12rpx;
          }
          
          .name {
            font-size: 26rpx;
            color: #333;
          }
          
          .rating {
            margin-left: auto;
            display: flex;
            align-items: center;
            
            image {
              width: 24rpx;
              height: 24rpx;
              margin-right: 4rpx;
            }
            
            text {
              font-size: 24rpx;
              color: #666;
            }
          }
        }
        
        .footer {
          display: flex;
          align-items: center;
          font-size: 24rpx;
          color: #666;
          
          .location, .deadline {
            display: flex;
            align-items: center;
            margin-right: 24rpx;
            
            image {
              width: 24rpx;
              height: 24rpx;
              margin-right: 4rpx;
            }
          }
          
          .bid-btn {
            margin-left: auto;
            padding: 12rpx 32rpx;
            background: #1d4ed8;
            color: #fff;
            border-radius: 32rpx;
            font-size: 24rpx;
          }
        }
      }
    }
  }
  
  .loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32rpx;
    
    .loading-icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 12rpx;
      animation: rotate 1s linear infinite;
    }
    
    text {
      font-size: 28rpx;
      color: #666;
    }
  }
}

.filter-popup {
  width: 600rpx;
  height: 100vh;
  background: #fff;
  
  .filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx;
    border-bottom: 1rpx solid #eee;
    
    .title {
      font-size: 32rpx;
      font-weight: 500;
      color: #333;
    }
    
    .reset {
      font-size: 28rpx;
      color: #666;
    }
  }
  
  .filter-content {
    padding: 32rpx;
    
    .filter-section {
      margin-bottom: 32rpx;
      
      .section-title {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 16rpx;
      }
      
      .budget-range {
        display: flex;
        align-items: center;
        
        input {
          flex: 1;
          height: 80rpx;
          border: 1rpx solid #eee;
          border-radius: 8rpx;
          padding: 0 24rpx;
          font-size: 28rpx;
        }
        
        text {
          margin: 0 16rpx;
          color: #999;
        }
      }
      
      .picker {
        height: 80rpx;
        border: 1rpx solid #eee;
        border-radius: 8rpx;
        padding: 0 24rpx;
        font-size: 28rpx;
        display: flex;
        align-items: center;
      }
    }
  }
  
  .filter-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 32rpx;
    background: #fff;
    border-top: 1rpx solid #eee;
    
    .confirm-btn {
      width: 100%;
      height: 88rpx;
      background: #1d4ed8;
      color: #fff;
      border-radius: 44rpx;
      font-size: 32rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style> 